<template>
  <view class="app-bg safe-box">
    <List :status="status" @scrolltolower="scrolltolower">
      <view class="me-card" v-for="item in list" :key="item._id">
        <view class="user">
          <u-cell :title="item.business.nickname" isLink
            :url="`/pages/business-home/business-home?id=${item.business._id}`">
            <view slot="icon" class="avatar">
              <u-image width="60rpx" height="60rpx" :src="joinDomain(item.business.avatar)"></u-image>
            </view>
          </u-cell>
        </view>
        <view class="goods" v-if="item.goods" @click="toDetail(item.goods._id)">
          <view class="cover">
            <u-image width="250rpx" height="200rpx" :src="joinDomain(item.goods.pictures[0].url)"></u-image>
          </view>
          <view class="info">
            <view class="head">
              <text class="title">{{item.goods.title}}</text>
            </view>
            <view class="bottom">
              <text class="price">{{item.goods.price}}</text>
            </view>
          </view>
        </view>
        <view class="handle">
          <u-button type="error" text="删除" @click="show = true"></u-button>
        </view>
        <u-modal :show="show" title="提示" content="删除该物品？" showCancelButton @confirm="del(item._id)"
          @cancel="show = false"></u-modal>
      </view>
    </List>
    <!-- <u-modal :show="show" title="提示" content="删除该物品？" showCancelButton @confirm="del(editId)" @cancel="show = false"></u-modal> -->
    <Empty mode="car" v-if="!list.length"></Empty>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        status: 'loadmore',
        query: {
          index: 1,
          size: 10
        },
        list: [],
        show: false
      }
    },
    methods: {
      async getList(reset = false) {
        const {
          index,
          size
        } = this.query
        const res = await this.$http.get('/cart', {
          index,
          size
        })
        if (reset) this.list = []
        this.list = [...this.list, ...res.data.records]
        this.status = res.data.records.length < this.query.size ? 'nomore' : 'loadmore'
      },
      scrolltolower() {
        this.$loadMore(this)
      },
      del(id) {
        this.$http.delete('/cart', {
          id
        }).then(res => {
          this.list = this.list.filter((item => {
            return item._id !== id
          }))
          this.show = false
        })
      },
      toDetail(id) {
        this.$nav.to('/pages/goods-detail/goods-detail', {
          id
        })
      }
    },
    onShow() {
      this.query.index = 1
      this.getList(true)
    }
  }
</script>

<style lang="scss" scoped>
  .me-card {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;

    .user {
      // display: flex;
      margin-bottom: 10rpx;

      .u-cell__body {}

      .avatar {
        margin-right: 10rpx;
        border-radius: $uni-border-radius-circle;
        overflow: hidden;
      }
    }

    .goods {
      display: flex;
      padding: 10rpx;

      .cover {
        border-radius: $uni-border-radius-lg;
        overflow: hidden;
        margin-right: 20rpx;
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }

    .handle {
      // margin-top: 20rpx;
    }
  }
</style>
